<template>
    <div class="lottery-bg">
        <div class="body">
            <div class="codeBody2" v-show="imgDone"><img src="" alt="" class="log-re"/></div>
            <div class="codeBody" ref="share" v-show="!imgDone">
                <div class="log">
                    <img :src="avatarBase64" alt="">
                    <div class="logi">
                        <p class="p2">
                            幸运大转盘
                        </p>
                    </div>
                </div>
                <img :src="qrcodeWechat" style="width: 175px;height:175px" v-if="interState"/>
                <qriously :value=val :size="size" class="code" v-else/>
                <div class="tip-btm">
                    <p class="p2">扫码进入商城抽好礼</p>
                    <div class="overdue">
                        <div class="diver"></div>
                        活动截止：{{overdue |dateFmt('YYYY-MM-dd')}}
                        <div class="diver"></div>
                    </div>
                </div>
            </div>
            <!-- @click="popRoute" -->
            <div class="btn">
                <p class="p1">长按图片保存到手机</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {commonMixin, sysMixin, wxMixin} from '@/common/mixin';
    import API from '../../request/api';
    import html2canvas from 'html2canvas';
    import {isIOS} from '@/common/utils';


    export default {
        data() {
            return {
                size: 175,
                overdue: this.$route.query.overdue,
                val: '',
                imgDone: false,
                avatarBase64: '',
                picBase64: '',
                interState: false,
                qrcodeWechat: ''
            };
        },
        mixins: [commonMixin, sysMixin, wxMixin],
        computed: {
            avatar() {
                return this.systemData.pic ? this.systemData.pic : '';
            },
        },
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        methods: {
            popRoute() {
                const img = document.querySelector('.log-re');
                this.downloadFile('img', img.src);
            },
            downloadFile(fileName, content) {
                const aLink = document.createElement('a');
                const blob = this.base64ToBlob(content); // new Blob([content]);

                const evt = document.createEvent('HTMLEvents');
                evt.initEvent('click', true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
                aLink.download = fileName;
                aLink.href = URL.createObjectURL(blob);
                aLink.click();
            },
            base64ToBlob(code) {
                var arr = code.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                var bstr = atob(arr[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type: mime});
            },
            _getBase64(url) {
                if (!url) {
                    return '';
                }
                return this.request.get(API.picbase64, {url: url});
            },
            formatBase64Src(base64) {
                return `data:image/png;base64,${base64}`;
            },
            domToImg() {
                let shareNode = this.$refs.share;
                const options = {useCORS: true};
                setTimeout(() => {
                    html2canvas(shareNode, options).then((canvas) => {
                        let img = document.querySelector('.log-re');
                        img.src = canvas.toDataURL();
                        this.imgDone = true;
                        // this.downloadFile(`分享${this.product.name}.png`, canvas.toDataURL());
                    });
                }, 20);
            },
            async conversion() {
                //获取base64编码 解决移动端跨域问题
                // try {
                //     let avatarResult = await this._getBase64(this.systemData.pic);
                //     this.avatarBase64 = this.formatBase64Src(avatarResult.content);
                // } catch (e) {
                //     console.log(e);
                // }
                setTimeout(() => {
                    this.domToImg();
                }, 20);
            }
        },
        beforeCreate() {
            // 可以在这加个loading事件，在加载实例时触发
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
        },
        mounted() {
            let refername = encodeURI(this.$store.state.login.userInfo.nickname);
            this.val = `https://${document.domain}/welcome?referid=${this.userInfo.uid}&system=${this.userInfo.system_id}&page=lottery`;
            if (window.__wxjs_environment === 'miniprogram') {
                //    判断是否先程序环境
                this.interState = true;
                this.request.post(API.qrcode, {
                    scene: {
                        referid: this.userInfo.uid,
                        system: this.userInfo.system_id,
                        page: 'lottery'
                    }
                }).then(res => {
                    this.qrcodeWechat = res.base64;
                    console.log('发生了qrcodeWechat');
                    this.conversion();
                    // wx.miniProgram.postMessage({
                    //     data: {
                    //         system: this.system,
                    //         referid: this.uid,
                    //         title: '产品名字',
                    //         type: 'online-detail'
                    //     }
                    // });
                });
            } else {
                this.conversion();
            }
            // 挂载元素，获取到DOM节点
            // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl';

    .lottery-bg {
        height: 100vh;
        padding-top: vw(80);
        box-sizing: border-box;
        background: main-liner;

        .body {
            width: 80vw;
            margin: 0 auto;
            color: gray3;
            overflow: hidden;

            .codeBody2 {
                /* border-radius main-radius */
                background-color: grayF;

                .log-re {
                    width: 80vw;
                }
            }

            .codeBody {
                /* border-radius main-radius */
                background-color: grayF;
                font-size: word16;
                padding: 30px 0;
                flex-y(center);

                // border-radius: 10px;

                .code {
                    padding: 0 60px;
                }

                .log {
                    // height: 30vw;
                    flex-y(center);

                    img {
                        width: vw(68);
                    }

                    .logi {
                        height: 12vw;

                        // flex-y();

                        // padding-left: 3vw;

                        .p2 {
                            word-vw(word20, gray3);
                        }
                    }
                }

                .userPic {
                    width: vw(45);
                    height: vw(45);
                    border-radius: vw(30);
                    margin: 0 auto;
                    display: block;
                }
            }

            .tip-btm {
                margin: vw(10) 0;
                text-align: center;

                .p2 {
                    word-vw(word14, gray3);
                }

                .overdue {
                    flex-x(center);
                    margin-top: vw(20);
                    word-vw(word12, gray3);

                    .diver {
                        width: 32px;
                        height: 2px;
                        margin: 0 vw(10);
                        background: gray6;
                    }
                }
            }

            .btn {
                width: vw(174);
                height: vw(24);
                border: 1px solid grayF;
                border-radius: all-radius;
                flex-x(center);
                margin: vw(30) auto;

                .p1 {
                    word-vw(word14, grayF);
                }
            }
        }
    }
</style>
